<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>任务首页</title>
    <meta name="site" content="https://blog.52itstyle.com"/>
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div style="margin-bottom: 6px;margin: 30px">
        <i-input v-model="content" placeholder="用户名" style="width: 300px"></i-input>
        <i-button type="primary" @click="search()" icon="ios-search">搜索</i-button>
        <i-button type="primary" @click="empty()" icon="ios-close-empty">清空</i-button>
    </div>
    <div style="margin-bottom: 6px;margin: 30px">
        <template>
            <i-table border :content="self" :columns="tableTitle" :data="logData"></i-table>
            <br>
            <Page style="float: right;" :current="pageNo" :total="tableSize" :page-size="pageSize"
                  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer
                  show-total></Page>
        </template>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            content: '',
            pageNo: 1,
            pageSize: 10,
            logId: "",
            logData: [],
            tableSize: 50,
            tableTitle: [{
                key: "logId",
                title: "日志ID"
            }, {
                key: "username",
                title: "用户名"
            }, {
                key: "address",
                title: "签到地址"
            }, {
                key: "state",
                title: "状态"
            }, {
                key: "logtime",
                title: "日期"
            }, {
                title: '操作',
                key: 'action',
                width: 300,
                align: 'left',
                render: function (h, params) {
                    var functionList = [];

                    //移除
                    var remove = h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small',
                            icon: 'close'
                        },
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: function () {
                                vm.remove(params.row.logId, params.row.logname);
                            }
                        }
                    }, '移除');
                    functionList.push(remove);
                    // 返回方法集合
                    return h('div', functionList);
                }
            }]

        },
        methods: {
            //搜索
            search: function () {
                $.ajax({
                    url: "../log/list",
                    type: "post",
                    data: {'username': this.content, "pageNo": this.pageNo, 'pageSize': this.pageSize},
                    success: function (result) {
                        vm.logData = result.msg.pageData;
                        vm.tableSize = result.msg.totalCount;
                    }
                });
            },
            empty: function () {
                vm.content = '';
                this.list();
            },
            //任务列表(自行实现分页)
            list: function () {
                $.ajax({
                    url: "../log/list",
                    type: "post",
                    data: {'time': (new Date()).toString(), "pageNo": this.pageNo, 'pageSize': this.pageSize},
                    success: function (result) {
                        vm.logData = result.msg.pageData;
                        vm.tableSize = result.msg.totalCount;
                    }
                });
            },
            //移除任务
            remove: function (logId, logname) {
                var that = this;
                top.layer.confirm('确定要移除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: "../log/remove",
                        type: "post",
                        data: {'time': (new Date()).toString(), "logId": logId, 'logname': logname},
                        success: function (result) {
                            if (result.code == "0") {
                                top.layer.msg('移除成功', {icon: 1});
                                window.setTimeout(that.list(), 1500);
                            }
                        }
                    });
                }, function () {

                });
            },
            reload: function () {
                // this.load();
                this.list();
            },
            changePage: function (pageNo) {
                vm.pageNo = pageNo;
                vm.reload();
            },
            changePageSize: function (pageSize) {
                vm.pageSize = pageSize;
                vm.reload();
            }
        },
        created: function () {
            this.list();
        }
    })

</script>
</body>
</html>
